import {
  type SlateElementProps,
  type TCaptionElement,
  type TResizableProps,
  type TVideoElement,
} from "platejs";

import { NodeApi, SlateElement } from "platejs";

export function VideoElementStatic(
  props: SlateElementProps&lt;TVideoElement & TCaptionElement & TResizableProps&gt;,
) {
  const { align = "center", caption, url, width } = props.element;

  return (
    &lt;SlateElement className="py-2.5" {...props}&gt;
      <div style="{{">
        &lt;figure
          className="group relative m-0 inline-block cursor-default"
          style={{ width }}
        &gt;
          <video controls />
          {caption && &lt;figcaption&gt;{NodeApi.string(caption[0]!)}&lt;/figcaption&gt;}
        &lt;/figure&gt;
      </div>
      {props.children}
    &lt;/SlateElement&gt;
  );
}
